<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./lib/vue.js"></script>
    <script src="./components/header.js"></script>
    <script src="./components/aside.js"></script>
  </head>
  <body>
    <div id="app">
      <headers></headers>
      <div class="main">
        <asides current="list"></asides>
        <div class="content">
            <p>列表页</p>
            <div class="box clearfix" >
                <div  v-show="list.length != 0" class="per" v-for="item in list" :key="item.id">
                    <div class="top">
                        <div>
                            <span>{{ item.title }}</span>by <b>{{ item.auth }}</b>
                        </div>
                        <div>
                            {{ item.time }}
                        </div>
                    </div>  
                    <div class="bot">
                        <a :href="`./info.html?id=${item.id}`">{{ item.info }}</a>
                    </div>
                </div >
                <div v-show = "list.length == 0">
                    暂无留言 <a  href="./add.html">点我去留言吧</a >
                </div>
            </div>
            
        </div>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data () {
            return {
               list:[]
            }
        },
        methods: {
            
        },
        created () {
            var list = localStorage.getItem("list");
            if(list){
                this.list = JSON.parse(list)
            }else{

            }
        }
      });
    </script>
  </body>
</html>
